body  {
    background-color: skyblue;
}
.container {
    width: 90%;
    min-width: 980px;  /* 80px*12+20px=980px */
    margin: 0 auto;
    background-color: #bfa;
    min-height: 800px;
    padding-right: 2.08333333%;
}
.row {
    clear: both;
}
.col {
    float: left;
    margin-left: 2.08333333%;
    width: 6.25%;
    background-color: #ff6700;
}
.col.span2 {
    width: calc(6.25%*2 + 2.08333333%);
}
.col.span3 {
    width: calc(6.25%*3 + 2.08333333%*2);
}
.col.span4 {
    width: calc(6.25%*4 + 2.08333333%*3);
}
.col.span5 {
    width: calc(6.25%*5 + 2.08333333%*4);
}
.col.span6 {
    width: calc(6.25%*6 + 2.08333333%*5);
}
.col.span7 {
    width: calc(6.25%*7 + 2.08333333%*6);
}
.col.span8 {
    width: calc(6.25%*8 + 2.08333333%*7);
}
.col.span9 {
    width: calc(6.25%*9 + 2.083333333%*8);
}
.col.span10 {
    width: calc(6.25%*10 + 2.08333333%*9);
}
.col.span11 {
    width: calc(6.25%*11 + 2.08333333%*10);
}
.col.span12 {
    width: calc(6.25%*12 + 2.08333333%*11);
}